<template>
    <div>
        <h1>情况四：监视reactive，ref定义的对象类型数据</h1>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <button @click="updateName">修改姓名</button>
        <button @click="updateAge">修改年龄</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {watch, ref, watchEffect} from "vue";
let name = ref('zs')
let age = ref(10)
function updateName() {
    name.value = 'lisi'
}
function updateAge() {
    age.value += 1
}

// watch([name,age],(val)=> {
//     let [name,age] = val
//     if(age >= 15 || name === 'lisi') {
//         console.log('flajfla')
//     }
// })
watchEffect(()=> {
    if(name.value === 'lisi' || age.value >= 15) {
        console.log('falfjla')
    }
})

</script>

<style scoped>
button {
    margin-right: 10px;
}
</style>
